<!-- src/views/warehousing/entryDetails/entryDetailsList.vue -->
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getWarehousingEntryDetailsPageApi, updateEntryDetailsStatusApi } from '@/api/warehousingEntryDetails';

const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const entryDetailsList = ref([])
const searchForm = ref({
  status: 1  // 默认状态设置为1（未到货）
})

// 表格选中项
const selectedRows = ref([])

// 处理表格选择
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 确认到货方法
const confirm = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  
  // 提取选中行的ID
  const ids = selectedRows.value.map(row => row.id)
  
  try {
    const res = await updateEntryDetailsStatusApi(ids, 2) // 状态2表示"已到货"
    if (res.code === 1) {
      ElMessage.success('确认到货成功')
      // 刷新数据
      getEntryDetailsPage()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const reset = () => {
  searchForm.value.batchNumber = ''
  getEntryDetailsPage()
}

const handleSearch = () => {
  page.value = 1
  getEntryDetailsPage()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getEntryDetailsPage()
}

const handleCurrentChange = (val) => {
  page.value = val
  getEntryDetailsPage()
}

const getEntryDetailsPage = async () => {
  // 传递状态参数给后端接口
  const res = await getWarehousingEntryDetailsPageApi(page.value, pageSize.value, searchForm.value.status)
  entryDetailsList.value = res.data.rows
  totalSize.value = res.data.total
}

const formatStatus = (status) => {
  const statusMap = {
    1: '未到货',
    2: '已到货',
    3: '已卸货',
    4: '分拣中',
    5: '完成分拣'
  }
  return statusMap[status] || '未知状态'
}

onMounted(() => {
  getEntryDetailsPage()  // 初始加载时会默认查询状态为1的数据
})
</script>

<template>
  <div class="entry-details-container">
    <div class="toolbar">
      <el-button type="primary" icon="Check" @click="confirm">确认到货</el-button>
      
      <div class="search-area">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="批次号">
            <el-input 
              v-model="searchForm.batchNumber" 
              placeholder="请输入" 
              clearable 
              style="width: 180px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-table 
      :data="entryDetailsList" 
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="code" label="商品编码" min-width="120" />
      <el-table-column prop="title" label="商品名称" min-width="150" />
      <el-table-column prop="batchNumber" label="批次号" min-width="120" />
      <el-table-column prop="consignorName" label="货主" min-width="100" />
      <el-table-column prop="supplierName" label="供应商" min-width="120" />
      <el-table-column prop="predictedArrivalTime" label="预测到达时间" min-width="160" />
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-tag 
            :type="scope.row.status === 1 ? 'info' : 
                   scope.row.status === 2 ? 'primary' : 
                   scope.row.status === 3 ? 'success' : 'warning'"
          >
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </div>
  </div>
</template>

<style scoped>
.entry-details-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-area {
  display: flex;
  align-items: center;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 15px;
}

.search-form :deep(.el-form-item__label) {
  font-weight: normal;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-area {
    margin-top: 15px;
  }
  
  .search-form {
    flex-wrap: wrap;
  }
  
  .search-form :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}
</style>